<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器的优先级_高级</title>
    <style>
        /* 这个颜色生效 原因:优先级的计算 （id选择器的数量，类、伪类、属性选择器的数量总和，元素选择器、伪元素选择器的数量总和）
           比较规则: 前面数量多者 后面的数量就不用在比 直接胜出 行内元素胜过所有选择器
           注意：!important 是优先级最高的属性 (加在属性上 只有这一个属性生效)
         */
        div>p>span:first-child {
          color: blueviolet;
        }
        span {
          color: red !important;
        }

        .c1 {
          color: skyblue;
        }
    </style>
</head>
<body>
    <div>
      <p>
        <span class="c1">作者是个大帅哥</span>
        <br>
        <span class="c2">作者真帅啊</span>
      </p>
    </div>
</body>
</html>